<template>
  <div>
    <el-dialog :close-on-click-modal="false" :visible.sync="visible" width="500px">
      <el-upload
          class="upload-demo"
          drag
          :show-file-list="false"
          action="" :http-request="customRequest"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          <div v-for="(v,i) in scheduleList" :key="i" style="margin-bottom: 10px;">
            <div style="font-weight: bold;margin-right: 30px;width: 350px;display: inline-block" class="my">
              {{ v.fileName }}
            </div>
            {{ v.message }}
            <el-progress :percentage="v.schedule" v-if="v.isShow === 0" :status="v.isShow===4?'format':'success'"></el-progress>
          </div>
        </div>
      </el-upload>
    </el-dialog>
    <!--    <a-modal :visible="visible" :closable="false">-->
    <!--      <a-upload-dragger-->
    <!--          name="file"-->
    <!--          :multiple="true"-->
    <!--          :showUploadList="false"-->
    <!--          :customRequest="customRequest">-->
    <!--        <p class="ant-upload-drag-icon">-->
    <!--          <a-icon type="inbox"/>-->
    <!--        </p>-->
    <!--        <p class="ant-upload-text">-->
    <!--          单击或拖动文件到该区域以上传-->
    <!--        </p>-->
    <!--        <p class="ant-upload-hint">-->
    <!--          支持单次上传。-->
    <!--        </p>-->
    <!--      </a-upload-dragger>-->
    <!--      <template slot="footer">-->
    <!--        <div v-for="(v,i) in scheduleList" :key="i" style="margin-bottom: 10px;" >-->
    <!--          <div style="font-weight: bold;margin-right: 30px;width: 350px;display: inline-block" class="my"> {{ v.fileName }}</div>-->
    <!--          {{ v.message }}-->
    <!--          <a-progress :percent="v.schedule" v-if="v.isShow === 0" :status="v.isShow===4?'exception':'active'"/>-->
    <!--          <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" v-if="v.isShow===2"/>-->
    <!--          <a-spin v-if="v.isShow === 1"/>-->
    <!--        </div>-->
    <!--        <a-button key="back" @click="onCancel">-->
    <!--          关闭-->
    <!--        </a-button>-->
    <!--        <div key="submit" type="primary" v-show="false">-->
    <!--        </div>-->
    <!--      </template>-->
    <!--    </a-modal>-->

  </div>

</template>
<script>
import upload from "@/api/upload";

export default {
  name: 'myUpLoad',
  components: {},
  props: {
    value: {},
    parentIds: {
      type: String,
      default: 'ok'
    }
  },
  data() {
    return {
      fileList: [],
      scheduleList: [],
      composeFile: []
    };
  },
  mounted() {
    upload.empty()
  },
  methods: {
    customRequest(file) {
      let _self = this
      let files = {
        uid: file.name,
        name: file.name,
        status: 'uploading',
      };
      this.fileList.push(files)
      upload.uploadFile(file.file, _self.parentIds, _self.$route.meta.title, _self)
    },
    // remove(file) {
    //   this.fileList.splice(this.fileList.findIndex(item => item.url === file.url), 1);
    // },
    onCancel() {
      this.$emit('init')
      this.$emit('input', false)
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      }
    }
  }
};
</script>
<style scoped>
.my {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
